<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>Bootstrap-grid</title>
		<link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
		<style>
			body {
				padding-top: 20px;
				background-color: #000;
			}
			.container {
				border: 1px solid #000;
			}
			.one > .row > div:first-child {
				background-color: pink;
			}
			.one > .row > div:nth-child(2) {
				background-color: skyblue;
			}
			.one > .row > div:last-child {
				background-color: yellowgreen;
			}
			 
			
		 	.detail {
		 		border-radius: 10px;
		 		background-color: #c70c1f;
		 		font: normal 80px/200px "Microsoft Yahei";
		 		color: #fff;
		 	}
		 	.two .row {
		 		margin-left: -31px;
		 		margin-right: -31px;
		 	}
			.two .row > div > p {
			 	font: normal 16px/20px "Microsoft Yahei";
			 	text-align: center;
			 	margin-top: 10px;
			 	color: #fff;
			 }
			 .detail {
			 	position: relative;
			 }
			 .line {
			 	width: 100%;
			 	position: absolute;
			 	left: 0;
			 	top: 50%;
			 	height: 6px;
			 	background-color: #c70c1f;
			 }
		</style>
	</head>
	<body>
		<!-- 这是第一个容器 -->
		<div class ="container one">
			<div class = "row">
				<div class = "col-md-4">111</div>
				<div class = "col-md-4">222</div>
				<div class = "col-md-4">333</div>
			</div>
		</div>
		<hr>

		<!-- 这是第二个容器 -->
		<div class = "container two">
			<div class = "row">
				<div class = "col-xs-12 col-sm-6 col-md-3 col-lg-2">
					<div class = "detail text-center">10
						<div class = "line"></div>
					</div>
					<p>10年专注于网站建设</p>
				</div>
				<div class = "col-xs-12 col-sm-6 col-md-3 col-lg-2">
					<div class = "detail text-center">16
						<div class = "line"></div>
					</div>
					<p>16年资深从业团队</p>
				</div>
				<div class = "col-xs-12 col-sm-6 col-md-3 col-lg-2">
					<div class = "detail text-center">20
						<div class = "line"></div>
					</div>
					<p>20+上市公司的选择</p>
				</div>
				<div class = "col-xs-12 col-sm-6 col-md-3 col-lg-2">
					<div class = "detail text-center">99
						<div class = "line"></div>
					</div>
					<p>赢得客户99%满意度</p>
				</div>
				<div class = "col-xs-12 col-sm-6 col-md-3 col-md-offset-3 col-lg-2 col-lg-offset-0">
					<div class = "detail text-center">10
						<div class = "line"></div>
					</div>
					<p>深圳十大互联网服务商</p>
				</div>
				<div class = "col-xs-12 col-sm-6 col-md-3 col-lg-2">
					<div class = "detail text-center">999
						<div class = "line"></div>
					</div>
					<p>999+企事业单位客户</p>
				</div>
			</div>
		</div>
	</body>
	<script src="../lib/jquery-3.2.1.js"></script>
	<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>